<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='标签/分类管理',active='category'">
<header th:replace="back/header::headerFragment(${title},${active})"></header>
    <meta th:name="_csrf" th:content="${_csrf.token}"/>
    <!-- 默认的header name是X-CSRF-TOKEN -->
    <meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>
<body class="fixed-left">
<div id="wrapper">
    <div th:replace="back/header::header-body"></div>
    <div class="content-page">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <h4 class="page-title">标签/分类管理</h4>
                    </div>
<!--                                        内容-->
 
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-6">
                                <div class="panel panel-color panel-purple">
                                    <div class="panel-heading">
                                        <h1 class="panel-title" style="line-height:20px;">分类列表</h1>
                                    </div>
                                    <div class="panel-body">
                                        <div class="btn-group m-b-10" th:each="category:${categories}">
                                            <button th:text="${category.getCategoryName()}+'('+${category.getCategoryCount()}+')'" th:if="${category.getCategoryName()} eq '默认分类'" type="button" th:class="'btn btn-'+ ${bootstrap.randomColor()} +' waves-effect waves-light'">
                                            </button>
                                            &nbsp;
                                            <button th:if="${category.getCategoryName()} ne '默认分类'" type="button"
                                                    th:class="'btn btn-'+ ${bootstrap.randomColor()} +' waves-effect waves-light'"
                                                    data-toggle="dropdown"
                                                    th:text="${category.getCategoryName()}+'('+${category.getCategoryCount()}+')'"
                                                    aria-expanded="false"><span
                                                    class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu" role="menu">
                                                <li>

<!--                                                    th:onclick传字符串要用：th:onclick="changeCategory([[${category.getCategoryName()}]]); 这种方式-->
                                                    <a th:onclick="changeCategory([[${category.getCategoryName()}]]);" class="edit-category" data-toggle="modal" data-target="#myModal1">修改</a>
                                                </li>
                                                <li>
                                                    <a href="#" id="delcategory" class="del-category" th:onclick="deleteCategory(this,[[${category.getCategoryName()}]]);">删除</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="panel panel-color panel-purple">
                                    <div class="panel-heading">
                                        <h1 class="panel-title" style="line-height:20px;">标签列表</h1>
                                    </div>
                                    <div class="panel-body">
                                        <div class="btn-group m-b-10" th:each="tag:${tags}">
                                            <button th:text="${tag.getTagName()}+'('+${tag.getTagCount()}+')'" type="button" th:class="'btn btn-'+ ${bootstrap.randomColor()} +' waves-effect waves-light'" data-toggle="dropdown" aria-expanded="false">
                                                 <span class="caret"></span>
                                            </button>
                                            &nbsp;
                                            <ul class="dropdown-menu" role="menu">
                                                <li><a class="del-category">删除</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="panel panel-default">
                                    <div class="panel-body">
                                        <form id="cform" class="form-inline" method="post" th:action="@{pear_admin}">
                                            <div class="form-group form-group">
                                                <input type="text" class="form-control" name="categoryName" placeholder="请输入分类名称">
                                            </div>
                                            <button type="submit" class="btn btn-success waves-effect waves-light m-l-10">
                                                保存分类
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>




                </div>
                <div th:replace="back/footer :: footer-content"></div>
            </div>
        </div>
    </div>
</div>

<!--model-->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel1">修改分类</h4>
            </div>
            <form method="post" th:action="@{pear_admin}">
                <div class="modal-body">
                    <input id="oldCategory" type="hidden" name="oldName">
                    <br/>
                   新分类名： <input type="text" name="newName" required>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">修改</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>




<div th:replace="back/footer :: footer"></div>

</body>

    <script>

        function changeCategory(oldName) {
            document.getElementById('oldCategory').value=oldName;
        }

        function deleteCategory(category,name) {
            var b=confirm("是否要删除分类："+name);
            if(b==true){
                category.href='/admin/deleteCategory?n='+name;
            }
        }


    </script>



</html>